<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图文混排</title>
  <style>
    h1{
     font-size:36px;
     color:red;
     letter-spacing:20px;<!-- 设置字间距 -->
    }
    .First_paragraph{
     color:orange;
    }
    .Second_paragraph{
      font-size:20px;
    }
    .Third_paragraph{
     font-size:25px;
     color:green;
     text-decoration:underline;
    }
    .Fourth_paragraph{
     font-size:20px;
     color:cyan;
     text-decoration:line-through;
    }
    .Fifth_paragraph{
     font-size:20px;
     color:blue;
    }
    .Sixth_paragraph{
     font-size:20px;
     color:purple;
    }
  </style>
</head>
<body>
   <header>
     <center>
       <h1>网页排版布局原则及特点</h1>
       <p>更新时间：2022年3月7日13点43分       来源：网页空间</p>
     </center>
   </header>
  <article>
    <img src="../img/HTML5_6.3.jpg" alt="HTML5就在我们身边" title="HTML5就在我们身边"
         align="left" hspace="20" height="360" width="676">
      <p class="First_paragraph"> &hearts; &nbsp;大图模式下的上图下文更强调了图片的重要性。
        首先大面积图片本身的视觉冲击力就大于文字信息，再者根据从上至下的浏览习惯图片也是先于文字展现在用户眼前。
        正因为如此，这对于图片质量的要求也就更高了，如果无法保证图片的质量，会大大影响整个页面的美观，
        从而影响到用户对产品的定位。如下图，站酷的首页推荐，作为一个设计平台的作品展示页面，图片的重要程度自然不言而喻。
        而这些作品的封面都有站酷小编参与把控，所以也不需要担心图片质量无法保证。
      </p>
      <p class="Second_paragraph">
        &hearts;&nbsp;多图模式是指一行展示2-3张图片，常见于视频、电商类的产品。
        在分析过大图模式之后，多图模式与之的区别也就显而易见了。
        <mark>随着图片的变小严重影响了文字信息的完整度，</mark>我们之前说过，文字信息一般与图片宽度(也就是内容模块宽度)相等，
        在单行字数较少的情况下，过多的行数是不利于阅读的，因此所能展示的文字信息也就变少了。
      </p>
      <p class="Third_paragrap">
        &hearts;&nbsp;为了能够传达足够的信息，
        就需要一目了然的图片，或者在图片中加上文字信息，无论哪种都对图片质量有很高的要求
        (注意：这儿的图片质量要求，不仅仅是指精美程度，还包括定制化的程度)。最后，
        也是最重要的一点区别就是多图模式下，版面效率至少提高了一倍。如下图：
      </p>
      <p class="Fourth_paragraph">
        &hearts;&nbsp;上文下图相比于之前的两种布局方式，则是提高了文字信息的重要程度。
        当然，由于图片的视觉冲击力依然存在，所以只能说是图文同样重要。上文下图常见于资讯、
        个人动态的页面中，图片多是采用文中配图或是用户上传，所以图片的质量也就无法保证。
      </p>
      <p class="Fifth_paragraph">
        &hearts;&nbsp;而文字信息完整度则由于这种布局方式下文字的重要度决定了它的完整度几乎不可能缺失。
        在版面效率上，资讯类页面依然由图片的宽高比所决定，
        个人动态类页面则由文字内容的长短和图片的高度共同决定。如下图：
      </p>
  </article>
   <center>
     <footer><hr>
       <i>原文链接：www.baidu.com       文章来源：百度百科</i>
     </footer>
   </center>
</body>
</html>